import { Button, Tooltip, message } from 'antd';
import { omitBy, isNil } from 'lodash';
import { Link } from 'umi';
import qs from 'query-string';
import { ProColumnType } from '@ant-design/pro-table';
import { ProFormText } from '@ant-design/pro-form';
import { fetchBorrowBookList } from '@/service/borrowBook';
import { BorrowBookState, RequestParams } from './interface';
import SearchAndTable from '@/components/SearchAndTable';
import { PageConfigParams } from '@/components/SearchAndTable/interface';
import DefaultCollapseHeader from '@/components/SearchAndTable/components/DefaultCollapseHeader';
import useAutoInjectCatelog from './hooks/useAutoInjectCatelog';
import { EyeTwoTone } from '@ant-design/icons';
import { history } from 'umi';

const rawColumns: ProColumnType<BorrowBookState>[] = [
    {
        title: '订单编号',
        key: 'order_no',
        dataIndex: 'order_no',
    },
    {
        title: 'RFID编号',
        key: 'rfid',
        dataIndex: 'rfid',
    },
    {
        title: 'ISBN编号',
        key: 'isbn',
        dataIndex: 'isbn',
    },
    {
        title: '书名',
        key: 'book_name',
        dataIndex: 'book_name',
    },
    {
        title: '作者',
        key: 'author',
        dataIndex: 'author',
        hideInSearch: true,
    },
    {
        title: '类别',
        key: 'cate_id',
        dataIndex: 'cate_id',
        valueType: 'select',
    },
    {
        title: '租赁人',
        key: 'username',
        dataIndex: 'borrow_username',
        render: (_, record) => {
            return (
                <Link
                    onClick={(e) => e.stopPropagation()}
                    style={{ color: '#1890ff' }}
                    to={`/personalCenter/${record.borrow_user_id}`}
                >
                    {record.borrow_username}
                </Link>
            );
        },
    },
    {
        title: '租赁量',
        key: '',
        dataIndex: '',
        hideInSearch: true,
        render: () => '1',
    },
    // {
    //     title: '租赁状态',
    //     key: 'status',
    //     dataIndex: 'status',
    //     hideInSearch: true,
    // },
    {
        title: '租赁时间',
        key: 'rent_time',
        dataIndex: 'rent_time',
        valueType: 'date',
        hideInSearch: true,
    },
    {
        title: '租赁人地址',
        key: 'address',
        dataIndex: 'address',
        hideInSearch: true,
    },
    {
        title: '证件类型',
        key: 'no_type',
        dataIndex: 'no_type',
        hideInSearch: true,
    },
    {
        title: '证件编号',
        key: 'no',
        dataIndex: 'no',
        hideInSearch: true,
    },
    // {
    //     title: '创建时间',
    //     key: 'rent_time',
    //     dataIndex: 'rent_time',
    //     hideInSearch: true,
    // },
    {
        title: '操作',
        hideInSearch: true,
        render: (text, record, _, action) => [
            <Tooltip title="查看">
                <EyeTwoTone
                    style={{ padding: '0 5px' }}
                    onClick={(e) => {
                        e.stopPropagation();
                        history.push(`/borrowBook/details/${record.id}`);
                    }}
                />
            </Tooltip>,
        ],
    },
];

const otherColumns: ProColumnType<BorrowBookState>[] = [
    { title: '租赁开始时间', key: 'create_time', valueType: 'date' },
    { title: '租赁结束时间', key: 'finish_time', valueType: 'date' },
];
// const toEnrollBookDetails = (record: BorrowBookState) => {
//     history.push(`/borrowBook/details/${record.id}`);
// };
export default function ReturnBook() {
    const dataSourceRequest = async ({
        pageSize = 10,
        current = 1,
        ...params
    }: PageConfigParams & RequestParams) => {
        // console.log(
        //     params,
        //     omitBy(params, (v) => isNil(v) || v === ''),
        // );
        const response = await fetchBorrowBookList({
            limit: pageSize,
            page: current,
            ...omitBy(params, (v: any) => isNil(v) || v === ''),
        });
        if (response.code !== 200) {
            return {
                total: 0,
                data: [],
            };
        }
        return response.data;
    };

    const { columns } = useAutoInjectCatelog(rawColumns);

    return (
        <>
            <SearchAndTable<BorrowBookState, RequestParams>
                columns={columns}
                otherColumns={otherColumns}
                request={dataSourceRequest}
                renderCollapseHeader={(params) => {
                    return (
                        <DefaultCollapseHeader collapseHeader={params}>
                            <ProFormText
                                disabled={params.collapse}
                                name="rfid"
                                placeholder="请输入RFID标识码"
                            />
                        </DefaultCollapseHeader>
                    );
                }}
                tableProps={{
                    // onRow: (record) => {
                    //     return {
                    //         onClick: (event) => {
                    //             toEnrollBookDetails(record);
                    //         }, // 点击行
                    //     };
                    // },
                    scroll: {
                        x: 1000,
                        y: 500,
                        scrollToFirstRowOnChange: true,
                    },
                }}
            />
        </>
    );
}
